
<template>
    <base-node type="klb_search" :config="props.data" :id="props.id" ref="baseNode">
        <template #default>
            <div class="flex justify-between">
                <div class="flex items-center">
                    <span>知识库</span>&nbsp;&nbsp;
                    <n-button text size="tiny" type="primary" @click="getKlbList">
                        <template #icon>
                            <jb-icon :local="true" icon="ri:loop-right-fill"></jb-icon>
                        </template>
                    </n-button>

                </div>
                <jb-btn text
                        icon="ri:book-shelf-fill"
                        type="primary" ghost
                        size="tiny"
                        :drawerComponent="AiKlb"
                        :drawerComponentProps="{appId:appId}"
                        drawerNegativeText=""
                        drawerPositiveText=""
                        :drawerArgs="{defaultWidth: '1360px',minWidth:1360}"
                >管理
                </jb-btn>


            </div>
            <jb-select placeholder="请选择知识库" :options="klbList"
                       labelField="name" valueField="id"
                       v-model:value="props.data.klbSearchConfig.klbId"></jb-select>
            <label>问题</label>
            <n-select placeholder="请选择问题" clearable v-model:value="props.data.klbSearchConfig.inputField"
                      :options="prevOutputFieldOptions"></n-select>
            <label>查询条数</label>
            <n-input-number round style="width: 100%" :precision="0" min="0" v-model:value="props.data.klbSearchConfig.limit"
                            placeholder="请输入查询条数" max="20">
            </n-input-number>
            <label>文档相关性分值要 >= {{ props.data.klbSearchConfig.minScore }}</label>
            <div class="flex items-center">
                <n-slider v-model:value="props.data.klbSearchConfig.minScore" :step="0.1" max="1"/>
            </div>
        </template>

        <template #footer>
            <p class="tc-gray ">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.klbSearchConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-140"></n-input>
                </div>
                <span class="tc-assist">知识库检索结果</span>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="klb_match" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 130px))" class="handle_success"/>
            <Handle type="source" id="klb_no_match" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 50px))" class="handle_warn"/>
            <Handle type="source" id="fail" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% + 30px))"/>
        </template>
    </base-node>
</template>
<script setup>
import {
    Position,
    Handle,
    useNode,
    useVueFlow
} from '@vue-flow/core'
import {
    ref,
    watch,
    onMounted, inject, provide, computed
} from "vue";
import {
    getNodeOutputFieldNames
} from '../node-def'
import {useRoute} from 'vue-router';
import {JBoltApi} from '@/service/request'
import AiKlb from '../../../../ai_knowledge_base/index.vue'
import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";

const baseNode = ref(null);


provide("baseNode", baseNode)
// 获取当前路由信息
const route = useRoute();
// 从路由参数中提取 appId
const appId = ref(route.params.appId);
console.log('从路由中获取appId', appId.value)


const props = defineProps(['id', 'data'])
const flow = useVueFlow();

const {
    node
} = useNode()

const klbList = ref([]);


const getKlbList = async () => {
    JBoltApi.tryGet('/aiKnowledgeBase/listAllEnabled', {
        appId: appId.value
    }).then(res => {
        klbList.value = res.data;
        console.log('获取知识库列表成功', res.data)
    }).catch(error => {
        console.error(error)
    });

}


/** 获取所有前置节点的输出字段，并生成下拉选项 */
const prevOutputFieldOptions = computed(() => {
    return baseNode.value ? baseNode.value.prevOutputFieldOptions : [];
});


//监听prevOutputFieldOptions
watch(() => prevOutputFieldOptions.value, (newV) => {
    //如果节点初始化完成后，并且某次数组变动后不包含当前值，则清空input的值
    if (baseNode.value?.initDone && newV && !newV.find(v => v.value == props.data.klbSearchConfig.inputField)) {
        // inputField.value = null;
        props.data.klbSearchConfig.inputField = null;
    }
})

/** 获取所有前置节点的输出字段，并生成下拉选项 */
onMounted(() => {
    getKlbList();
})
</script>


<style scoped>
._container {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    width: 380px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.header,
.form {
    border-bottom: 1px solid rgb(229, 231, 235);
}

.logo {
    background: #dcfce7;
    border-radius: 12px;
}

label {
    margin-bottom: 8px;
}

label:not(:first-child) {
    margin-top: 16px;
}

.output {
    background: rgb(249, 250, 251);
    border-radius: 12px;
}

.output-flag {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}
</style>
